<template>
  <div class="hot-game home-activity scroll-item">
    <div class="activity-item hot-game-item">
      <h3 class="home-title">最新游戏
        <a href="#">更多
          <i class="iconfont icon-gengduo"></i>
        </a>
      </h3>
      <a :href="item.link ? item.link : 'javascript:;'" class="hot-game-link" v-for="item in Home.h5Game">
        <i v-lazy:background-image="item.icon"></i>
        <h4>{{item.name}}</h4>
      </a>
    </div>
    <div class="activity-item hot-game-item">
      <h3 class="home-title">热门游戏
        <a href="#">更多
          <i class="iconfont icon-gengduo"></i>
        </a>
      </h3>
      <a :href="item.link ? item.link : 'javascript:;'" class="hot-game-link" v-for="item in Home.h5Game">
        <i v-lazy:background-image="item.icon"></i>
        <h4>{{item.name}}</h4>
      </a>
    </div>
    <div class="activity-item hot-game-item">
      <h3 class="home-title">推荐游戏
        <a href="#">更多
          <i class="iconfont icon-gengduo"></i>
        </a>
      </h3>
      <a :href="item.link ? item.link : 'javascript:;'" class="hot-game-link" v-for="item in Home.h5Game">
        <i v-lazy:background-image="item.icon"></i>
        <h4>{{item.name}}</h4>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    Home: function() {
         return this.$store.state.mock
    //   return {h5Game:[{"id":"1","icon":"http://res.lequ.com/Public/Uploads/201709/59cc5e91b2b01.png","name":"不服小天王","link":"javascript:;","device":"android","type":"竞技","label":"魔幻","size":"12","state":"3","user_number":"19649","download_number":"34962"},{"id":"2","icon":"http://res.lequ.com/Public/Uploads/201707/596ead5533c53.gif","name":"独步武林","link":"javascript:;","device":"h5","type":"养成","label":"历史","size":"84","state":"3","user_number":"85401","download_number":"31690"},{"id":"3","icon":"http://res.lequ.com/Public/Uploads/201711/5a153251cb435.png","name":"侠客行","link":"javascript:;","device":"android","type":"角色","label":"战争","size":"67","state":"2","user_number":"71959","download_number":"101054"},{"id":"4","icon":"http://res.lequ.com/Public/Uploads/201711/5a041eabcfb82.png","name":"决战沙城","link":"javascript:;","device":"h5","type":"格斗","label":"科幻","size":"143","state":"3","user_number":"82449","download_number":"29786"},{"id":"5","icon":"http://res.lequ.com/Public/Uploads/201712/5a264ff043366.png","name":"帝王把妹","link":"javascript:;","device":"android","type":"竞技","label":"历史","size":"33","state":"0","user_number":"14878","download_number":"13650"},{"id":"6","icon":"http://res.lequ.com/Public/Uploads/201711/5a152cb0ca692.png","name":"猎场","link":"javascript:;","device":"android","type":"塔防","label":"战争","size":"203","state":"1","user_number":"85924","download_number":"103405"},{"id":"1","icon":"http://res.lequ.com/Public/Uploads/201709/59cc5e91b2b01.png","name":"不服小天王","link":"javascript:;","device":"android","type":"竞技","label":"魔幻","size":"12","state":"3","user_number":"19649","download_number":"34962"},{"id":"1","icon":"http://res.lequ.com/Public/Uploads/201709/59cc5e91b2b01.png","name":"不服小天王","link":"javascript:;","device":"android","type":"竞技","label":"魔幻","size":"12","state":"3","user_number":"19649","download_number":"34962"},{"id":"1","icon":"http://res.lequ.com/Public/Uploads/201709/59cc5e91b2b01.png","name":"不服小天王","link":"javascript:;","device":"android","type":"竞技","label":"魔幻","size":"12","state":"3","user_number":"19649","download_number":"34962"},{"id":"1","icon":"http://res.lequ.com/Public/Uploads/201709/59cc5e91b2b01.png","name":"不服小天王","link":"javascript:;","device":"android","type":"竞技","label":"魔幻","size":"12","state":"3","user_number":"19649","download_number":"34962"},{"id":"1","icon":"http://res.lequ.com/Public/Uploads/201709/59cc5e91b2b01.png","name":"不服小天王","link":"javascript:;","device":"android","type":"竞技","label":"魔幻","size":"12","state":"3","user_number":"19649","download_number":"34962"}]}
    //   return this.$store.state.Home
    }
  }
}
</script>

<style lang="less" scoped>
.hot-game {
  margin-bottom: 50px;
  .home-title {
    margin-top: 5px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
  }
  .hot-game-item {
    height: 775px;
    padding: 0 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    overflow: hidden;
    .hot-game-link {
      display: inline-block;
      width: 80px;
      height: auto;
      margin-right: 40px;
      margin-top: 15px;
      i {
        width: 80px;
        height: 80px;
        background-size: 100%;
        display: inline-block;
      }
      h4 {
        text-align: center;
        line-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      &:nth-child(3n+1) {
        margin-right: 0
      }
    }
  }
}
</style>


